<template>
	<view>
		<view class="add_icon" @click="handleGoRouter('/pages_teach_db/add-vac/add-vac')">
			+
		</view>
		<view class="search-box">
			<u-search placeholder="请输入宝宝姓名" v-model="keyword" @search="titleConfirm()" :show-action="true"
				:animation="false" @custom="custom"></u-search>
		</view>
		<view class="">
			<u-dropdown>
				<u-dropdown-item v-model="value1" :title="value1" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" :title="value2" :options="options2"></u-dropdown-item>
				<u-dropdown-item v-model="value3" :title="value3" :options="options3"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="">
			<view class="u-table">
				<view class="u-tr">
					<view class="u-th">班级</view>
					<view class="u-th">姓名</view>
					<view class="u-th">疫苗名称</view>
					<view class="u-th">接种状态</view>
					<view class="u-th">操作</view>
				</view>
				<view class="u-tr" v-for="(item,index) in dataList" :key="index">
					<view class="u-td">{{item.class}}</view>
					<view class="u-td">{{item.name}}</view>
					<view class="u-td">{{item.vacname}}</view>
					<view class="u-td">{{item.status}}</view>
					<view class="u-td u-td-flex">
						<view class="fl" @click="handleGoRouter(`/pages_teach_db/vac-info/vac-info?id=${JSON.stringify(item)}`)">详情
						</view>
						<view class="fl cen"
							@click="handleGoRouter(`/pages_teach_db/vac-detail/vac-detail?id=${JSON.stringify(item)}`)">编辑</view>
						<view class="fl" @click="handleDetele()">删除</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					name: '吕布',
					age: '22',
					class: '终极一班',
					vacname: 'hpv22222222222222222222222',
					status: '已接种',
					remark:'111111',
					birthdate:'2025年10月1日'
				}, {
					name: '吕布儿子',
					age: '22',
					class: '一班',
					vacname: 'hpv',
					status: '已接种',
					remark:'111111',
					birthdate:'2025年10月11日'
				}, {
					name: '吕布',
					age: '22',
					class: '一班',
					vacname: 'hpv',
					status: '已接种',
					remark:'111111',
					birthdate:'2025年10月12日'
				}],
				keyword: '',
				value1: '班级',
				value2: '疫苗名称',
				value3: '接种状态',
				options1: [{
						label: '默认排序',
						value: '默认排序',
					},
					{
						label: '距离优先',
						value: '距离优先',
					},
					{
						label: '价格优先',
						value: '价格优先',
					}
				],
				options2: [{
						label: '去冰',
						value: '去冰',
					},
					{
						label: '加冰',
						value: '加冰',
					},
				],
				options3: [{
						label: '去冰',
						value: '去冰',
					},
					{
						label: '加冰',
						value: '加冰',
					},
				],
			}
		},
		methods: {
			handleGoRouter(url) {
				this.$u.route({
					url: url
				})
			},
			titleConfirm(value) {
				console.log(value, 'titleConfirm');
			},
			custom(value) {
				console.log(value, 'custom');
			}
		}
	}
</script>

<style scoped lang="scss">
	.add_icon {
		border: 4rpx solid #000;
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 86rpx;
		font-size: 70rpx;
		border-radius: 200rpx;
		position: fixed;
		bottom: 94rpx;
		right: 24rpx;
		z-index: 99999;
	}

	.search-box {
		margin: 20rpx;
	}

	.u-table {
		width: 100%;

		.u-tr {
			display: flex;

			.u-th {
				flex: 1;
				text-align: center;
				border-bottom: 2rpx solid rgb(228, 231, 237);
				border-right: 2rpx solid rgb(228, 231, 237);
				color: #303133;
				font-weight: 700;
				background-color: #f5f6f8;
				padding: 12rpx 4rpx;
			}

			.u-td {
				flex: 1;
				text-align: center;
				font-size: 22rpx;
				padding: 12rpx 2rpx;
				border-bottom: 2rpx solid rgb(228, 231, 237);
				border-right: 2rpx solid rgb(228, 231, 237);
				color: rgb(96, 98, 102);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				.fl {
					color: skyblue;
				}

				.cen {
					margin: 0px 10rpx;
				}
			}

			.u-td-flex {
				display: flex;
			}
		}
	}

	.u-td-overflow {}

	.btn {
		margin: 0rpx 16rpx;
	}
</style>